<template>
  <div class="comment">
    <div class="comment-head">
      <span>评论区 </span>
      <span>共{{ commentInfo.total }}条评论</span>
    </div>
    <comment-editor
      class="comment-send-box"
      @reload-comment="reloadComment"
    ></comment-editor>
    <div class="comment-list">
      <ul style="padding: 0px">
        <li
          v-for="item in commentInfo.list"
          :key="item.id"
          style="list-style: none"
        >
          <comment-item :comment-info="item"></comment-item>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { api } from "@/api";
import CommentItem from "./CommentItem.vue";
import CommentEditor from "./editor/CommentEditor.vue";
export default {
  components: {
    CommentItem,
    CommentEditor,
  },
  data() {
    return {
      commentInfo: {
        list: [],
        total: 0,
      },
      inputShow: false,
    };
  },
  methods: {
    reloadComment() {
      this.loadCommentInfo(null, null, 1);
    },
    async loadCommentInfo(aid = null, uid = null, page = 1) {
      if (this.$route.query.id) {
        // 文章id
        aid = this.$route.query.id;
      }
      if (this.$route.query.aid) {
        // 用户id
        uid = this.$route.query.aid;
      }
      try {
        this.commentInfo = (
          await this.$axios(api.comment.getCommentList(aid, uid, page))
        ).data;
        this.$emit("comment-total", this.commentInfo.total);
      } catch (error) {
        console.log(error);
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
  },
  mounted() {
    this.loadCommentInfo();
  },
};
</script>

<style lang="less" scoped>
.comment {
  width: 60%;
  margin: 0 auto;
  @media screen and (max-width: 1024px) {
    width: 95%;
  }
  .comment-send-box {
    margin-top: 30px;
  }
}
</style>
